<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>礼物愿望清单 - 社交心愿平台</title>
    
    <!-- 引入外部资源 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <style>
        :root {
            --primary: #E63946;
            --primary-light: #F1FAEE;
            --secondary: #457B9D;
            --accent: #F7B267;
            --dark: #1D3557;
            --light: #F8FAFC;
            --gray: #64748B;
            --light-gray: #E2E8F0;
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
            --shadow: 0 4px 16px rgba(0,0,0,0.12);
            --transition: all 0.3s ease;
            --radius: 12px;
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #FCF8F8;
            color: var(--dark);
            line-height: 1.6;
            padding-bottom: 3rem;
        }
        
        .container {
            max-width: 1200px;
        }
        
        /* 页面标题样式 */
        .page-header {
            padding: 2.5rem 0;
            margin-bottom: 2rem;
            background: linear-gradient(135deg, var(--primary-light) 0%, #fff 100%);
            border-radius: 0 0 30px 30px;
            text-align: center;
        }
        
        .page-title {
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 0.75rem;
            position: relative;
            display: inline-block;
        }
        
        .page-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 15%;
            width: 70%;
            height: 3px;
            background-color: var(--accent);
            border-radius: 2px;
        }
        
        .page-subtitle {
            font-size: 1rem;
            color: var(--dark);
            max-width: 700px;
            margin: 1rem auto 0;
            opacity: 0.8;
        }
        
        /* 分类标签样式 */
        .category-tabs {
            display: flex;
            overflow-x: auto;
            padding-bottom: 0.5rem;
            margin-bottom: 2rem;
            gap: 10px;
            scrollbar-width: thin;
        }
        
        .category-tabs::-webkit-scrollbar {
            height: 4px;
        }
        
        .category-tabs::-webkit-scrollbar-thumb {
            background-color: var(--accent);
            border-radius: 2px;
        }
        
        .category-item {
            white-space: nowrap;
            background-color: white;
            border: 1px solid var(--light-gray);
            border-radius: 20px;
            padding: 6px 18px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: var(--transition);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .category-item:hover, .category-item.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 卡片容器样式 */
        .gift-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        /* 特色礼物愿望 */
        .featured-gift {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 1.5rem;
            background-color: white;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
        }
        
        .featured-gift:hover {
            box-shadow: var(--shadow);
        }
        
        .featured-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .featured-content {
            padding: 2rem;
            display: flex;
            flex-direction: column;
        }
        
        /* 礼物卡片基础样式 */
        .gift-card {
            background-color: white;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .gift-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow);
        }
        
        /* 价格标签 */
        .price-tag {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: var(--accent);
            color: white;
            border-radius: 4px;
            padding: 3px 8px;
            font-size: 0.8rem;
            font-weight: 600;
            z-index: 1;
        }
        
        /* 优先级标签 */
        .priority-tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.7rem;
            font-weight: 600;
            margin-right: 6px;
            margin-bottom: 0.5rem;
        }
        
        .priority-high {
            background-color: rgba(230, 57, 70, 0.1);
            color: var(--primary);
        }
        
        .priority-medium {
            background-color: rgba(247, 178, 103, 0.1);
            color: var(--accent);
        }
        
        .priority-low {
            background-color: rgba(69, 123, 157, 0.1);
            color: var(--secondary);
        }
        
        /* 图片容器样式 */
        .image-container {
            position: relative;
            overflow: hidden;
        }
        
        .card-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .gift-card:hover .card-image {
            transform: scale(1.05);
        }
        
        /* 多图布局 */
        .multi-images {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 4px;
            height: 100%;
        }
        
        .multi-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .multi-images.count-1 {
            grid-template-columns: 1fr;
        }
        
        .multi-images.count-3 {
            grid-template-rows: repeat(2, 1fr);
        }
        
        .multi-images.count-3 .multi-image:first-child {
            grid-column: span 2;
        }
        
        .multi-images.count-4 {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
        }
        
        /* 图片数量指示器 */
        .image-count {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background-color: rgba(0,0,0,0.6);
            color: white;
            border-radius: 4px;
            padding: 2px 6px;
            font-size: 0.75rem;
        }
        
        /* 内容样式 */
        .card-body {
            padding: 1rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .gift-title {
            font-size: 1.15rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--dark);
            transition: var(--transition);
            line-height: 1.4;
        }
        
        .gift-card:hover .gift-title {
            color: var(--primary);
        }
        
        .gift-description {
            color: var(--gray);
            font-size: 0.85rem;
            margin-bottom: 1rem;
            line-height: 1.5;
            flex-grow: 1;
        }
        
        /* 作者信息 */
        .author-info {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 0.75rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px dashed var(--light-gray);
        }
        
        .author-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--primary-light);
        }
        
        .author-name {
            font-weight: 500;
            font-size: 0.85rem;
        }
        
        .wish-date {
            font-size: 0.75rem;
            color: var(--gray);
        }
        
        /* 互动统计 */
        .gift-stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .stat-item:hover {
            color: var(--primary);
        }
        
        .stat-item.liked {
            color: var(--primary);
        }
        
        .stat-item.saved {
            color: var(--secondary);
        }
        
        /* 无图礼物样式 */
        .no-image-card {
            border: 1px solid var(--light-gray);
        }
        
        .no-image-body {
            padding: 1.25rem;
        }
        
        .no-image-header {
            background-color: var(--primary-light);
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--light-gray);
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .featured-gift {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 768px) {
            .gift-container {
                grid-template-columns: 1fr;
            }
            
            .page-title {
                font-size: 1.8rem;
            }
            
            .featured-content {
                padding: 1.5rem;
            }
        }
        
        /* 加载更多按钮 */
        .load-more {
            display: block;
            margin: 2rem auto;
            background-color: white;
            border: 1px solid var(--primary);
            color: var(--primary);
            padding: 8px 24px;
            border-radius: 20px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .load-more:hover {
            background-color: var(--primary);
            color: white;
        }
        
        /* 快速操作按钮 */
        .quick-actions {
            display: flex;
            gap: 8px;
            margin-top: 1rem;
        }
        
        .action-btn {
            flex: 1;
            padding: 6px 0;
            border-radius: 6px;
            font-size: 0.85rem;
            font-weight: 500;
            text-align: center;
            cursor: pointer;
            transition: var(--transition);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }
        
        .primary-action {
            background-color: var(--primary);
            color: white;
        }
        
        .primary-action:hover {
            background-color: #d62839;
        }
        
        .secondary-action {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .secondary-action:hover {
            background-color: #e9ecef;
        }
    </style>
</head>
<body>
    <div class="container py-4 px-4">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">礼物愿望清单</h1>
            <p class="page-subtitle">发现大家想要的礼物，也许你能帮他们实现愿望，或者找到灵感</p>
            
            <!-- 礼物分类标签 -->
            <div class="category-tabs">
                <div class="category-item active">
                    <i class="fas fa-gift"></i> 全部礼物
                </div>
                <div class="category-item">
                    <i class="fas fa-laptop"></i> 电子产品
                </div>
                <div class="category-item">
                    <i class="fas fa-tshirt"></i> 服饰鞋帽
                </div>
                <div class="category-item">
                    <i class="fas fa-book"></i> 书籍文具
                </div>
                <div class="category-item">
                    <i class="fas fa-gamepad"></i> 游戏玩具
                </div>
                <div class="category-item">
                    <i class="fas fa-utensils"></i> 美食饮品
                </div>
                <div class="category-item">
                    <i class="fas fa-spa"></i> 美妆个护
                </div>
                <div class="category-item">
                    <i class="fas fa-concierge-bell"></i> 服务体验
                </div>
            </div>
        </div>
        
        <!-- 礼物愿望容器 -->
        <div class="gift-container">
            <!-- 特色礼物愿望 - 大图展示 -->
            <div class="featured-gift">
                <div class="image-container">
                    <img src="https://picsum.photos/800/600?random=50" alt="微单相机礼物愿望" class="featured-image">
                    <div class="price-tag">¥4500 左右</div>
                </div>
                <div class="featured-content">
                    <div>
                        <span class="priority-tag priority-high">高优先级</span>
                        <span class="priority-tag">电子产品</span>
                    </div>
                    <h3 class="gift-title">希望拥有一台轻便的微单相机，记录生活中的美好瞬间</h3>
                    <p class="gift-description">
                        一直想学习摄影，记录生活中的美好瞬间和旅行中的风景。希望能有一台轻便的微单相机，方便携带，画质也不错的那种。目前看中了索尼ZV-E10和佳能M50 Mark II，预算在4000-5000元左右。如果能配上一个小痰盂镜头就更好了！
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/100/100?random=60" alt="摄影爱好者小明的头像" class="author-avatar">
                        <div>
                            <div class="author-name">摄影爱好者小明</div>
                            <div class="wish-date">愿望发布于 2023-09-15</div>
                        </div>
                    </div>
                    
                    <div class="quick-actions">
                        <button class="action-btn primary-action">
                            <i class="fas fa-gift"></i> 准备礼物
                        </button>
                        <button class="action-btn secondary-action">
                            <i class="far fa-comment"></i> 询问详情
                        </button>
                    </div>
                    
                    <div class="gift-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>5.2k 浏览</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>236 评论</span>
                        </div>
                        <div class="stat-item liked">
                            <i class="fas fa-heart"></i>
                            <span>876 点赞</span>
                        </div>
                        <div class="stat-item saved">
                            <i class="fas fa-bookmark"></i>
                            <span>452 收藏</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 多图礼物1 -->
            <div class="gift-card">
                <div class="image-container" style="height: 180px;">
                    <div class="multi-images count-3">
                        <img src="https://picsum.photos/400/300?random=51" alt="机械键盘展示图1" class="multi-image">
                        <img src="https://picsum.photos/400/300?random=52" alt="机械键盘展示图2" class="multi-image">
                        <img src="https://picsum.photos/400/300?random=53" alt="机械键盘展示图3" class="multi-image">
                    </div>
                    <div class="image-count">3图</div>
                    <div class="price-tag">¥800 左右</div>
                </div>
                <div class="card-body">
                    <div>
                        <span class="priority-tag priority-medium">中优先级</span>
                        <span class="priority-tag">电子产品</span>
                    </div>
                    <h3 class="gift-title">想要一把茶轴机械键盘，提升工作效率和手感</h3>
                    <p class="gift-description">
                        每天都要敲很多字，普通键盘用久了手指很累。希望能有一把茶轴机械键盘，键程适中，声音不会太大影响他人，最好是87键的，方便携带。
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/100/100?random=61" alt="程序员小李的头像" class="author-avatar">
                        <div class="author-name">程序员小李</div>
                    </div>
                    
                    <div class="gift-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>1.2k 浏览</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>87 评论</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i>
                            <span>342 点赞</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-bookmark"></i>
                            <span>156 收藏</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 无图礼物1 -->
            <div class="gift-card no-image-card">
                <div class="no-image-header">
                    <div class="price-tag">¥300 左右</div>
                </div>
                <div class="card-body no-image-body">
                    <div>
                        <span class="priority-tag priority-low">低优先级</span>
                        <span class="priority-tag">书籍文具</span>
                    </div>
                    <h3 class="gift-title">想要一套《哈利波特》精装纪念版全集</h3>
                    <p class="gift-description">
                        一直是哈利波特的粉丝，希望能拥有一套精装纪念版全集，收藏起来。最好是中英双语版的，既可以重温故事，又能学习英语。
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/100/100?random=62" alt="书迷小王的头像" class="author-avatar">
                        <div class="author-name">书迷小王</div>
                    </div>
                    
                    <div class="gift-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>765 浏览</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>43 评论</span>
                        </div>
                        <div class="stat-item liked">
                            <i class="fas fa-heart"></i>
                            <span>210 点赞</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-bookmark"></i>
                            <span>98 收藏</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 单图礼物1 -->
            <div class="gift-card">
                <div class="image-container" style="height: 180px;">
                    <img src="https://picsum.photos/400/300?random=54" alt="运动鞋图片" class="card-image">
                    <div class="price-tag">¥600 左右</div>
                </div>
                <div class="card-body">
                    <div>
                        <span class="priority-tag priority-medium">中优先级</span>
                        <span class="priority-tag">服饰鞋帽</span>
                    </div>
                    <h3 class="gift-title">希望有一双适合跑步的运动鞋，开始健身计划</h3>
                    <p class="gift-description">
                        最近打算开始跑步健身，需要一双舒适的运动鞋。平时主要在塑胶跑道和公路上跑，希望鞋子轻便、减震效果好，尺码42码。
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/100/100?random=63" alt="健身爱好者小张的头像" class="author-avatar">
                        <div class="author-name">健身爱好者小张</div>
                    </div>
                    
                    <div class="gift-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>2.1k 浏览</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>124 评论</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i>
                            <span>567 点赞</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-bookmark"></i>
                            <span>234 收藏</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 多图礼物2 -->
            <div class="gift-card">
                <div class="image-container" style="height: 180px;">
                    <div class="multi-images count-4">
                        <img src="https://picsum.photos/400/300?random=55" alt="护肤品套装图片1" class="multi-image">
                        <img src="https://picsum.photos/400/300?random=56" alt="护肤品套装图片2" class="multi-image">
                        <img src="https://picsum.photos/400/300?random=57" alt="护肤品套装图片3" class="multi-image">
                        <img src="https://picsum.photos/400/300?random=58" alt="护肤品套装图片4" class="multi-image">
                    </div>
                    <div class="image-count">4图</div>
                    <div class="price-tag">¥1200 左右</div>
                </div>
                <div class="card-body">
                    <div>
                        <span class="priority-tag priority-high">高优先级</span>
                        <span class="priority-tag">美妆个护</span>
                    </div>
                    <h3 class="gift-title">想要一套适合干性皮肤的护肤品套装</h3>
                    <p class="gift-description">
                        换季了，皮肤特别干燥，希望能有一套适合干性皮肤的护肤品套装，包括洁面、爽肤水、精华和面霜。敏感肌适用的最好，不含酒精成分。
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/100/100?random=64" alt="美妆爱好者小丽的头像" class="author-avatar">
                        <div class="author-name">美妆爱好者小丽</div>
                    </div>
                    
                    <div class="gift-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>3.5k 浏览</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>210 评论</span>
                        </div>
                        <div class="stat-item liked">
                            <i class="fas fa-heart"></i>
                            <span>789 点赞</span>
                        </div>
                        <div class="stat-item saved">
                            <i class="fas fa-bookmark"></i>
                            <span>345 收藏</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 无图礼物2 -->
            <div class="gift-card no-image-card">
                <div class="no-image-header">
                    <div class="price-tag">¥500 左右</div>
                </div>
                <div class="card-body no-image-body">
                    <div>
                        <span class="priority-tag priority-medium">中优先级</span>
                        <span class="priority-tag">服务体验</span>
                    </div>
                    <h3 class="gift-title">希望能有一次专业的全身按摩体验券</h3>
                    <p class="gift-description">
                        最近工作压力很大，经常加班，腰酸背痛的。希望能有一张专业按摩店的全身按摩体验券，放松一下身心，缓解疲劳。最好是连锁品牌，环境好一点的。
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/100/100?random=65" alt="上班族小陈的头像" class="author-avatar">
                        <div class="author-name">上班族小陈</div>
                    </div>
                    
                    <div class="gift-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>1.8k 浏览</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>98 评论</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i>
                            <span>456 点赞</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-bookmark"></i>
                            <span>189 收藏</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 双图礼物 -->
            <div class="gift-card">
                <div class="image-container" style="height: 180px;">
                    <div class="multi-images count-2">
                        <img src="https://picsum.photos/400/300?random=59" alt="桌游图片1" class="multi-image">
                        <img src="https://picsum.photos/400/300?random=60" alt="桌游图片2" class="multi-image">
                    </div>
                    <div class="image-count">2图</div>
                    <div class="price-tag">¥350 左右</div>
                </div>
                <div class="card-body">
                    <div>
                        <span class="priority-tag priority-low">低优先级</span>
                        <span class="priority-tag">游戏玩具</span>
                    </div>
                    <h3 class="gift-title">想要一套《狼人杀》豪华版桌游，和朋友聚会时玩</h3>
                    <p class="gift-description">
                        朋友聚会时经常玩狼人杀，但一直用的是简单版卡牌。希望能有一套豪华版的，角色更多，卡牌质量更好，最好还能有配套的号码牌和面具。
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/100/100?random=66" alt="桌游爱好者小林的头像" class="author-avatar">
                        <div class="author-name">桌游爱好者小林</div>
                    </div>
                    
                    <div class="gift-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>987 浏览</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>56 评论</span>
                        </div>
                        <div class="stat-item liked">
                            <i class="fas fa-heart"></i>
                            <span>321 点赞</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-bookmark"></i>
                            <span>145 收藏</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多按钮 -->
        <button class="load-more">
            <i class="fas fa-refresh"></i> 加载更多礼物愿望
        </button>
    </div>

    <script>
        // 分类标签切换功能
        document.querySelectorAll('.category-item').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.category-item').forEach(t => {
                    t.classList.remove('active');
                });
                this.classList.add('active');
                
                // 筛选不同分类的礼物愿望
                const category = this.textContent.trim();
                showToast(`已切换到 "${category}" 分类`);
            });
        });
        
        // 点赞功能
        document.querySelectorAll('.stat-item .fa-heart').forEach(icon => {
            icon.parentElement.addEventListener('click', function(e) {
                e.stopPropagation();
                
                const isLiked = this.classList.contains('liked');
                const countEl = this.querySelector('span');
                let count = parseInt(countEl.textContent.replace(/,|\s/g, ''));
                
                if (isLiked) {
                    this.classList.remove('liked');
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    count--;
                } else {
                    this.classList.add('liked');
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    count++;
                }
                
                countEl.textContent = count.toLocaleString() + ' 点赞';
                showToast(isLiked ? "取消点赞" : "点赞成功");
            });
        });
        
        // 收藏功能
        document.querySelectorAll('.stat-item .fa-bookmark').forEach(icon => {
            icon.parentElement.addEventListener('click', function(e) {
                e.stopPropagation();
                
                const isSaved = this.classList.contains('saved');
                const countEl = this.querySelector('span');
                let count = parseInt(countEl.textContent.replace(/,|\s/g, ''));
                
                if (isSaved) {
                    this.classList.remove('saved');
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    count--;
                } else {
                    this.classList.add('saved');
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    count++;
                }
                
                countEl.textContent = count.toLocaleString() + ' 收藏';
                showToast(isSaved ? "取消收藏" : "收藏成功");
            });
        });
        
        // 评论按钮点击
        document.querySelectorAll('.stat-item .fa-comment, .action-btn.secondary-action').forEach(btn => {
            btn.closest('.stat-item, .action-btn').addEventListener('click', function(e) {
                e.stopPropagation();
                const title = this.closest('.gift-card, .featured-gift').querySelector('.gift-title').textContent;
                showToast(`查看 "${title}" 的评论`);
            });
        });
        
        // 准备礼物按钮点击
        document.querySelectorAll('.action-btn.primary-action').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const title = this.closest('.featured-gift').querySelector('.gift-title').textContent;
                showToast(`你准备为 "${title}" 准备礼物，太棒了！`);
            });
        });
        
        // 卡片点击事件
        document.querySelectorAll('.gift-card, .featured-gift').forEach(card => {
            card.addEventListener('click', function() {
                const title = this.querySelector('.gift-title').textContent;
                showToast(`查看礼物详情: ${title}`);
                // 实际应用中这里会跳转到详情页
                // window.location.href = 'gift-detail.html';
            });
        });
        
        // 加载更多按钮
        document.querySelector('.load-more').addEventListener('click', function() {
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
            
            // 模拟加载延迟
            setTimeout(() => {
                this.innerHTML = '<i class="fas fa-refresh"></i> 加载更多礼物愿望';
                showToast('已加载更多礼物愿望');
            }, 1500);
        });
        

    </script>
</body>
</html>

